<template>
  <div class="wa-income-line wa-card" ref="contentRef">

  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import {onMounted, ref, defineProps} from "vue";

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  data: {
    type: Object,
    required: true
  }
})
const contentRef = ref(null)

onMounted(() => {
  const myChart = echarts.init(contentRef.value)
  myChart.setOption({
    title: {
      text: props.title,
      left: 'center'
    },
    yAxis: {
      type: 'value'
    },
    xAxis: {
      data: props.data.x
    },
    series: [
      {
        data: props.data.y,
        type: 'line'
      }
    ]
  })
  const timer = setInterval(() => {
    if (props.data.x.length) {
      clearInterval(timer)
      myChart.setOption({
        xAxis: {
          data: props.data.x
        },
        series: [
          {
            data: props.data.y,
            type: 'line'
          }
        ]
      })
    }
  }, 500)
})
</script>

<style lang="less" scoped>
.wa-income-line {
  height: 400px;
  margin-right: 20px;
}
</style>